<script setup>
/**
 * @name 视频生成字幕--手机组件
 */
import { DraggableContainer } from "vue3-draggable-resizable";
import Vue3DraggableResizable from "vue3-draggable-resizable";
import "vue3-draggable-resizable/dist/Vue3DraggableResizable.css";
import {
  // 视频截取首帧画面
  captureFirstFrame,
} from "@/common/utils/richTextProcessing.js";

import { computed, onMounted, reactive, ref, watch } from "vue";

const props = defineProps({
    width: {
        type: Number,
        default: 1080
    },
    height: {
        type: Number,
        default: 1920
    },
    // 缩小倍率
    scale: {
        type: Number,
        default: 4.5
    },
    // 视频链接
    video_url: {
        type: String,
        default: ''
    },
    // 字体等一些配置
    formState: {
        type: Object,
        default: () => ({})
    }
})

const state = reactive({
    // 视频链接
    bgc_url: '', 
})

const width = computed(() => {
    return 1080 / props.scale
})

const height = computed(() => {
    return 1920 / props.scale 
})

const resizableStyle = computed(() => {
    if (state.bgc_url) {
        return {
        background: `url(${state.bgc_url})`,
        'background-repeat': 'no-repeat',
        'background-size': 'contain',
        "backgroundPosition": "center",
        width: `${width.value}px`,
        height: `${height.value}px`,
        }
    } else {
        return {
            width: `${width.value}px`,
            height: `${height.value}px`,
            background:'#fff',
        }

    }
})

// 拖拽元素属性
const position = reactive({
    x: 0,
    y: height.value * 0.75,
    w: width.value,
    h: 20,
    text: '拖动我，调整生成字幕的位置',
})

// 样式
const coverStyle = computed(() => {
    return () => {
        const dom = document.getElementById('ai_phone_content_p')
        if (dom) {
            const height = dom.clientHeight; 
            console.log(height,'多高???/');
            
            // 同步外层容器的高度
            position.h = height;
        }
        console.log(props.formState,'有什么值');
        const {font_size=60, bold=0, italic=0} = props.formState;
        return {
            color: '#fff',
            wid1th: '100%',
            textAlign: 'center',
            fontSize: `${font_size / props.scale}px`,
            margin: 0,
            padding: 0,
            fontWeight: bold == 1 ? 'bold' : 'normal',
            // 文字倾斜
            fontStyle: italic == 1 ? 'italic' : 'normal',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: 'rgba(0, 0, 0, 0.3)',
            cursor: 'move',
            minHeight: '20px'
        }
    }
})


const getBgc = async () => {
    console.log('执行了获取背景');
    if (!props.video_url) return;
    const url = await captureFirstFrame(props.video_url);
    state.bgc_url = url;
    console.log(state.bgc_url,'state.bgc_url');
}

watch(() => props.video_url, () => {
    getBgc() 
})

onMounted(() => {
    getBgc()
})


// 获取x y 坐标
const getScalePosition = () => {
    const x = position.x * props.scale;
    const text_y = Math.round(position.y * props.scale)
    return { x, text_y }
}

defineExpose({
    getScalePosition,
})
</script>

<template>
    <div class="ai_pohone">
        <!-- <a-button @click="getScalePosition" size="small">获取位置</a-button> -->
         <div style="background: #000;">
             <DraggableContainer :style="{...resizableStyle}" :referenceLineColor="'white'">
                     <Vue3DraggableResizable v-model:x="position.x"
                       v-model:y="position.y" :w="position.w" :h="position.h"
                        :lockAspectRatio="true" :resizable="false" :draggable="true"
                       :parent="true" @drag-end="dragEndHandle" >
                       <p id="ai_phone_content_p" :style="{ ...coverStyle() }" class="editor_content">
                         {{ position.text }}
                    </p>
                    </Vue3DraggableResizable>
                </DraggableContainer>
         </div>
    </div>
</template>

<style lang="less" scoped>
:deep(.vdr-container){
    border-color: var(--ss-primary-5);
}
    .ai_pohone{
        width: 100%;
        height: 100%;
        background-color: #eee;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>